<template>
    <section class="three_bing">
  		<echats-bing class="echats_bing" :idName="idNames[0]" :option="option1"></echats-bing>
  		<echats-bing class="echats_bing" :idName="idNames[1]"  :option="option2"></echats-bing>
  		<echats-bing class="echats_bing" :idName="idNames[2]"  :option="option3"></echats-bing>
    </section>
</template>

<script>
    import echatsBing from "./echats_bing"
    export default {
    	props:{
    		idNames:{
    			type:Array,
    			default:function() {
    				return ['11','22','33']
    			}
    		},
    		
    	},
    	components:{
    		echatsBing
    	},
        data() {
          return {
          	idName1:'ww',
          	idName2:'uu',
          	idName3:'cc',
          	option1:{
				    tooltip: {
						        trigger: 'item',
						        formatter: "{a} <br/>{b}: {c} ({d}%)"
						    },
						    legend: {
						        orient: 'vertical',
						        x: 'left',
						        data:[]
						    },
						    series: [
						        {
						            name:'访问来源',
						            type:'pie',
						            selectedMode: 'single',
						            radius: ['30%', '40%'],
						            avoidLabelOverlap: false,
						            label: {
						                normal: {
						                    show: false,
						                    position: 'center'
						                },
						                emphasis: {
						                    show: true,
						                    textStyle: {
						                        fontSize: '12',
						                        fontWeight: 'bold'
						                    }
						                }
						            },
						            labelLine: {
						                normal: {
						                    show: false
						                }
						            },
						            data:[
						                {value:35, name:'直达'},
						                {value:679, name:'营销广告'},
						            ]
						        },
						        {
						            name:'',
						            type:'pie',
						            radius: ['40%', '55%'],
						                     label: {
						                normal: {
						                    show: false,
						                    position: 'center'
						                },
						                emphasis: {
						                    show: true,
						                    textStyle: {
						                        fontSize: '12',
						                        fontWeight: 'bold'
						                    }
						                }
						            },
						            labelLine: {
						                normal: {
						                    show: false
						                }
						            },
						            data:[
						                {value:30, name:''},
						                {value:70, name:'邮件营销'},
						            ]
						        }
						    ],
				},
          	option2:{
				    tooltip: {
						        trigger: 'item',
						        formatter: "{a} <br/>{b}: {c} ({d}%)"
						    },
						    legend: {
						        orient: 'vertical',
						        x: 'left',
						        data:[]
						    },
						    series: [
						        {
						            name:'访问来源',
						            type:'pie',
						            selectedMode: 'single',
						            radius: ['30%', '40%'],
						            avoidLabelOverlap: false,
						            label: {
						                normal: {
						                    show: false,
						                    position: 'center'
						                },
						                emphasis: {
						                    show: true,
						                    textStyle: {
						                        fontSize: '30',
						                        fontWeight: 'bold'
						                    }
						                }
						            },
						            labelLine: {
						                normal: {
						                    show: false
						                }
						            },
						            data:[
						                {value:35, name:'直达'},
						                {value:679, name:'营销广告'},
						            ]
						        },
						        {
						            name:'',
						            type:'pie',
						            radius: ['40%', '55%'],
						                     label: {
						                normal: {
						                    show: false,
						                    position: 'center'
						                },
						                emphasis: {
						                    show: true,
						                    textStyle: {
						                        fontSize: '30',
						                        fontWeight: 'bold'
						                    }
						                }
						            },
						            labelLine: {
						                normal: {
						                    show: false
						                }
						            },
						            data:[
						                {value:30, name:''},
						                {value:70, name:'邮件营销'},
						            ]
						        }
						    ],
						},
          	option3:{
				    tooltip: {
						        trigger: 'item',
						        formatter: "{a} <br/>{b}: {c} ({d}%)"
						    },
						    legend: {
						        orient: 'vertical',
						        x: 'left',
						        data:[]
						    },
						    series: [
						        {
						            name:'访问来源',
						            type:'pie',
						            selectedMode: 'single',
						            radius: ['30%', '40%'],
						            avoidLabelOverlap: false,
						            label: {
						                normal: {
						                    show: false,
						                    position: 'center'
						                },
						                emphasis: {
						                    show: true,
						                    textStyle: {
						                        fontSize: '30',
						                        fontWeight: 'bold'
						                    }
						                }
						            },
						            labelLine: {
						                normal: {
						                    show: false
						                }
						            },
						            data:[
						                {value:35, name:'直达'},
						                {value:679, name:'营销广告'},
						            ]
						        },
						        {
						            name:'',
						            type:'pie',
						            radius: ['40%', '55%'],
						                     label: {
						                normal: {
						                    show: false,
						                    position: 'center'
						                },
						                emphasis: {
						                    show: true,
						                    textStyle: {
						                        fontSize: '12',
						                        fontWeight: 'bold'
						                    }
						                }
						            },
						            labelLine: {
						                normal: {
						                    show: false
						                }
						            },
						            data:[
						                {value:302, name:''},
						                {value:70, name:'邮件营销'},
						            ]
						        }
						    ],
						},
          };
        },
        methods: {
        
        }
  };
</script>

<style scoped="scoped">
    .echats_bing{
    	width: 200px !important;
    	height: 200px !important; 
    	display: inline-block;
    }
</style>